<template>
  <div class="page-container">
    <div v-if="loading" class="d-flex justify-content-center align-items-center" style="height: 300px;">
      <div class="spinner-border text-primary" role="status">
        <span class="visually-hidden">加载中...</span>
      </div>
    </div>

    <div v-else>
      <!-- 里程碑编辑模态框 -->
      <div class="modal fade" :class="{ 'show d-block': showMilestoneModal }" tabindex="-1" role="dialog" aria-labelledby="milestoneModalLabel" :aria-hidden="!showMilestoneModal">
        <div class="modal-dialog modal-dialog-centered" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="milestoneModalLabel">{{ isEditMode ? '编辑工程节点' : '添加工程节点' }}</h5>
              <button type="button" class="btn-close" @click="closeMilestoneModal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
              <form @submit.prevent="saveMilestone">
                <div class="mb-3">
                  <label for="milestoneName" class="form-label">节点名称</label>
                  <select class="form-select" id="milestoneName" v-model="currentMilestone.name" required>
                    <option v-for="option in getMilestoneNameOptions" :key="option" :value="option">{{ option }}</option>
                  </select>
                </div>
                <div class="mb-3">
                  <label for="milestoneCategory" class="form-label">节点类别</label>
                  <select class="form-select" id="milestoneCategory" v-model="currentMilestone.category" required @change="handleCategoryChange">
                    <option value="前期">前期</option>
                    <option value="发包">发包</option>
                    <option value="施工">施工</option>
                    <option value="竣工">竣工</option>
                  </select>
                </div>
                <div class="mb-3">
                  <label for="milestonePlannedDate" class="form-label">计划日期</label>
                  <input type="date" class="form-control" id="milestonePlannedDate" v-model="currentMilestone.planned_date">
                </div>
                <div class="mb-3">
                  <label for="milestoneActualDate" class="form-label">实际日期</label>
                  <input type="date" class="form-control" id="milestoneActualDate" v-model="currentMilestone.actual_date">
                </div>
                <div class="mb-3">
                  <label for="milestoneNotes" class="form-label">备注</label>
                  <textarea class="form-control" id="milestoneNotes" v-model="currentMilestone.notes" rows="3"></textarea>
                </div>
              </form>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" @click="closeMilestoneModal">取消</button>
              <button type="button" class="btn btn-primary" @click="saveMilestone">保存</button>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-backdrop fade" :class="{ 'show': showMilestoneModal }" v-if="showMilestoneModal"></div>

      <div class="project-header card mb-4">
        <div class="card-body">
          <div class="d-flex justify-content-between align-items-start mb-3">
            <div>
              <h2 class="project-title">{{ projectData.name }}</h2>
              <div class="project-meta d-flex align-items-center flex-wrap">
                <span class="badge me-2" :class="getStatusClass(projectData)">{{ projectData.phase_status || '正常进行' }}</span>
                <span class="me-3">项目ID: {{ projectData.id }}</span>
                <span class="me-3">项目序号: {{ projectData.project_number || '-' }}</span>
                <span class="me-3">项目编号: {{ projectData.project_code }}</span>
              </div>
            </div>
            <div>
              <button class="btn btn-outline-primary me-2" @click="editProject">
                <i class="bi bi-pencil me-1"></i> 编辑项目
              </button>
              <button class="btn btn-outline-success">
                <i class="bi bi-arrow-up-circle me-1"></i> 更新进度
              </button>
            </div>
          </div>
          
          <div class="row mt-4">
            <div class="col-md-3 mb-3">
              <div class="small text-muted mb-1">建设状态</div>
              <div>{{ projectData.status || '-' }}</div>
            </div>
            <div class="col-md-3 mb-3">
              <div class="small text-muted mb-1">规划类型</div>
              <div>{{ projectData.planning_type || '-' }}</div>
            </div>
            <div class="col-md-3 mb-3">
              <div class="small text-muted mb-1">建设地点</div>
              <div>{{ projectData.location || '-' }}</div>
            </div>
            <div class="col-md-3 mb-3">
              <div class="small text-muted mb-1">总投资(万元)</div>
              <div>{{ projectData.total_investment ? projectData.total_investment.toLocaleString() : '-' }}</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 选项卡导航 -->
      <div class="card mb-4">
        <div class="card-body p-0">
          <ul class="nav nav-tabs" id="projectDetailTabs" role="tablist">
            <li class="nav-item" role="presentation">
              <button class="nav-link active" id="overview-tab" data-bs-toggle="tab" data-bs-target="#overview" type="button" role="tab" aria-controls="overview" aria-selected="true">
                项目概览
              </button>
            </li>
            <li class="nav-item" role="presentation">
              <button class="nav-link" id="milestones-tab" data-bs-toggle="tab" data-bs-target="#milestones" type="button" role="tab" aria-controls="milestones" aria-selected="false">
                工程节点
              </button>
            </li>
            <li class="nav-item" role="presentation">
              <button class="nav-link" id="progress-tab" data-bs-toggle="tab" data-bs-target="#progress" type="button" role="tab" aria-controls="progress" aria-selected="false">
                进度记录
              </button>
            </li>
            <li class="nav-item" role="presentation">
              <button class="nav-link" id="contract-tab" data-bs-toggle="tab" data-bs-target="#contract" type="button" role="tab" aria-controls="contract" aria-selected="false">
                合同信息
              </button>
            </li>
            <li class="nav-item" role="presentation">
              <button class="nav-link" id="units-tab" data-bs-toggle="tab" data-bs-target="#units" type="button" role="tab" aria-controls="units" aria-selected="false">
                参建单位
              </button>
            </li>
            <li class="nav-item" role="presentation">
              <button class="nav-link" id="task-tab" data-bs-toggle="tab" data-bs-target="#task" type="button" role="tab" aria-controls="task" aria-selected="false">
                任务书要求
              </button>
            </li>
            <li class="nav-item" role="presentation">
              <button class="nav-link" id="notes-tab" data-bs-toggle="tab" data-bs-target="#notes" type="button" role="tab" aria-controls="notes" aria-selected="false">
                备注信息
              </button>
            </li>
          </ul>
        </div>
      </div>

      <!-- 选项卡内容 -->
      <div class="tab-content" id="projectDetailTabsContent">
        <!-- 项目概览 -->
        <div class="tab-pane fade show active" id="overview" role="tabpanel" aria-labelledby="overview-tab">
          <div class="card mb-4">
            <div class="card-header">
              <h5 class="card-title mb-0">项目概览</h5>
            </div>
            <div class="card-body">
              <div class="row">
                <div class="col-md-6 mb-3">
                  <div class="detail-item">
                    <div class="detail-label">项目状态</div>
                    <div class="detail-value">{{ projectData.status }}</div>
                  </div>
                </div>
                <div class="col-md-6 mb-3">
                  <div class="detail-item">
                    <div class="detail-label">项目阶段状态</div>
                    <div class="detail-value">
                      <span class="badge" :class="getStatusClass(projectData)">{{ projectData.phase_status || '正常进行' }}</span>
                    </div>
                  </div>
                </div>
                <div class="col-md-6 mb-3">
                  <div class="detail-item">
                    <div class="detail-label">任务书文号</div>
                    <div class="detail-value">{{ projectData.task_document_no || '-' }}</div>
                  </div>
                </div>
                <div class="col-md-6 mb-3">
                  <div class="detail-item">
                    <div class="detail-label">最近更新时间</div>
                    <div class="detail-value">{{ lastUpdateDate || '-' }}</div>
                  </div>
                </div>
                <div class="col-md-6 mb-3">
                  <div class="detail-item">
                    <div class="detail-label">任务书下达时间</div>
                    <div class="detail-value">{{ projectData.task_issue_date || '-' }}</div>
                  </div>
                </div>
                <div class="col-md-6 mb-3">
                  <div class="detail-item">
                    <div class="detail-label">要求完成时间</div>
                    <div class="detail-value">{{ projectData.required_completion_date || '-' }}</div>
                  </div>
                </div>
                <div class="col-md-6 mb-3">
                  <div class="detail-item">
                    <div class="detail-label">合同开工日期</div>
                    <div class="detail-value">{{ projectData.contract_start_date || '-' }}</div>
                  </div>
                </div>
                <div class="col-md-6 mb-3">
                  <div class="detail-item">
                    <div class="detail-label">合同竣工日期</div>
                    <div class="detail-value">{{ projectData.contract_end_date || '-' }}</div>
                  </div>
                </div>
                <div class="col-md-6 mb-3">
                  <div class="detail-item">
                    <div class="detail-label">合同工期(天)</div>
                    <div class="detail-value">{{ projectData.contract_duration || '-' }}</div>
                  </div>
                </div>
                <div class="col-md-6 mb-3">
                  <div class="detail-item">
                    <div class="detail-label">合同金额(万元)</div>
                    <div class="detail-value">{{ projectData.contract_amount || '-' }}</div>
                  </div>
                </div>
                <div class="col-md-6 mb-3">
                  <div class="detail-item">
                    <div class="detail-label">总投资(万元)</div>
                    <div class="detail-value">{{ projectData.total_investment || '-' }}</div>
                  </div>
                </div>
                <div class="col-md-6 mb-3">
                  <div class="detail-item">
                    <div class="detail-label">直接费(万元)</div>
                    <div class="detail-value">{{ projectData.direct_cost || '-' }}</div>
                  </div>
                </div>
                <div class="col-md-6 mb-3">
                  <div class="detail-item">
                    <div class="detail-label">发包模式</div>
                    <div class="detail-value">{{ projectData.bidding_mode || '-' }}</div>
                  </div>
                </div>
                <div class="col-md-6 mb-3">
                  <div class="detail-item">
                    <div class="detail-label">项目地点</div>
                    <div class="detail-value">{{ projectData.location || '-' }}</div>
                  </div>
                </div>
                <div class="col-md-6 mb-3" v-if="projectData.status && projectData.status.startsWith('施工-')">
                  <div class="detail-item">
                    <div class="detail-label">施工进度</div>
                    <div class="detail-value">{{ projectData.progress ? `${projectData.progress}%` : '-' }}</div>
                  </div>
                </div>
                <div class="col-md-6 mb-3">
                  <div class="detail-item">
                    <div class="detail-label">现场联系人</div>
                    <div class="detail-value">{{ projectData.field_contact || '-' }}</div>
                  </div>
                </div>
                <div class="col-md-6 mb-3">
                  <div class="detail-item">
                    <div class="detail-label">联系电话</div>
                    <div class="detail-value">{{ projectData.contact_phone || '-' }}</div>
                  </div>
                </div>
                <div class="col-12 mb-3">
                  <div class="detail-item">
                    <div class="detail-label">项目描述</div>
                    <div class="detail-value">{{ projectData.description || '-' }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 工程节点 -->
        <div class="tab-pane fade" id="milestones" role="tabpanel" aria-labelledby="milestones-tab">
          <div class="card mb-4">
            <div class="card-header d-flex justify-content-between align-items-center">
              <h5 class="card-title mb-0">工程节点</h5>
            </div>
            <div class="card-body">
              <ul class="nav nav-pills mb-3" id="milestonesTabs" role="tablist">
                <li class="nav-item" role="presentation">
                  <button class="nav-link active" id="early-tab" data-bs-toggle="pill" data-bs-target="#early" type="button" role="tab" aria-controls="early" aria-selected="true">前期</button>
                </li>
                <li class="nav-item" role="presentation">
                  <button class="nav-link" id="bidding-tab" data-bs-toggle="pill" data-bs-target="#bidding" type="button" role="tab" aria-controls="bidding" aria-selected="false">发包</button>
                </li>
                <li class="nav-item" role="presentation">
                  <button class="nav-link" id="construction-tab" data-bs-toggle="pill" data-bs-target="#construction" type="button" role="tab" aria-controls="construction" aria-selected="false">施工</button>
                </li>
                <li class="nav-item" role="presentation">
                  <button class="nav-link" id="completion-tab" data-bs-toggle="pill" data-bs-target="#completion" type="button" role="tab" aria-controls="completion" aria-selected="false">竣工</button>
                </li>
              </ul>
              
              <div class="tab-content" id="milestonesTabsContent">
                <!-- 前期节点 -->
                <div class="tab-pane fade show active" id="early" role="tabpanel" aria-labelledby="early-tab">
                  <div class="table-responsive">
                    <table class="table table-hover">
                      <thead>
                        <tr>
                          <th>节点名称</th>
                          <th>计划日期</th>
                          <th>实际日期</th>
                          <th>状态</th>
                          <th>备注</th>
                          <th>操作</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr v-for="milestone in getEarlyMilestones" :key="milestone.id">
                          <td class="milestone-name" @click="viewMilestoneDetail(milestone)">{{ milestone.name }}</td>
                          <td @click="viewMilestoneDetail(milestone)">{{ milestone.planned_date || '-' }}</td>
                          <td @click="viewMilestoneDetail(milestone)">{{ milestone.actual_date || '-' }}</td>
                          <td @click="viewMilestoneDetail(milestone)">
                            <span class="badge" :class="getMilestoneStatusClass(milestone)">
                              {{ getMilestoneStatus(milestone) }}
                            </span>
                          </td>
                          <td @click="viewMilestoneDetail(milestone)">{{ milestone.notes || '-' }}</td>
                          <td>
                            <button class="btn btn-sm btn-outline-primary me-1" @click.stop="editMilestone(milestone)">
                              <i class="bi bi-pencil"></i> 编辑
                            </button>
                          </td>
                        </tr>
                        <tr v-if="getEarlyMilestones.length === 0">
                          <td colspan="6" class="text-center py-3">暂无前期节点数据</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
                
                <!-- 发包节点 -->
                <div class="tab-pane fade" id="bidding" role="tabpanel" aria-labelledby="bidding-tab">
                  <div class="table-responsive">
                    <table class="table table-hover">
                      <thead>
                        <tr>
                          <th>节点名称</th>
                          <th>计划日期</th>
                          <th>实际日期</th>
                          <th>状态</th>
                          <th>备注</th>
                          <th>操作</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr v-for="milestone in getBiddingMilestones" :key="milestone.id">
                          <td class="milestone-name" @click="viewMilestoneDetail(milestone)">{{ milestone.name }}</td>
                          <td @click="viewMilestoneDetail(milestone)">{{ milestone.planned_date || '-' }}</td>
                          <td @click="viewMilestoneDetail(milestone)">{{ milestone.actual_date || '-' }}</td>
                          <td @click="viewMilestoneDetail(milestone)">
                            <span class="badge" :class="getMilestoneStatusClass(milestone)">
                              {{ getMilestoneStatus(milestone) }}
                            </span>
                          </td>
                          <td @click="viewMilestoneDetail(milestone)">{{ milestone.notes || '-' }}</td>
                          <td>
                            <button class="btn btn-sm btn-outline-primary me-1" @click.stop="editMilestone(milestone)">
                              <i class="bi bi-pencil"></i> 编辑
                            </button>
                          </td>
                        </tr>
                        <tr v-if="getBiddingMilestones.length === 0">
                          <td colspan="6" class="text-center py-3">暂无发包节点数据</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
                
                <!-- 施工节点 -->
                <div class="tab-pane fade" id="construction" role="tabpanel" aria-labelledby="construction-tab">
                  <div class="table-responsive">
                    <table class="table table-hover">
                      <thead>
                        <tr>
                          <th>节点名称</th>
                          <th>计划日期</th>
                          <th>实际日期</th>
                          <th>状态</th>
                          <th>备注</th>
                          <th>操作</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr v-for="milestone in getConstructionMilestones" :key="milestone.id">
                          <td class="milestone-name" @click="viewMilestoneDetail(milestone)">{{ milestone.name }}</td>
                          <td @click="viewMilestoneDetail(milestone)">{{ milestone.planned_date || '-' }}</td>
                          <td @click="viewMilestoneDetail(milestone)">{{ milestone.actual_date || '-' }}</td>
                          <td @click="viewMilestoneDetail(milestone)">
                            <span class="badge" :class="getMilestoneStatusClass(milestone)">
                              {{ getMilestoneStatus(milestone) }}
                            </span>
                          </td>
                          <td @click="viewMilestoneDetail(milestone)">{{ milestone.notes || '-' }}</td>
                          <td>
                            <button class="btn btn-sm btn-outline-primary me-1" @click.stop="editMilestone(milestone)">
                              <i class="bi bi-pencil"></i> 编辑
                            </button>
                          </td>
                        </tr>
                        <tr v-if="getConstructionMilestones.length === 0">
                          <td colspan="6" class="text-center py-3">暂无施工节点数据</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
                
                <!-- 竣工节点 -->
                <div class="tab-pane fade" id="completion" role="tabpanel" aria-labelledby="completion-tab">
                  <div class="table-responsive">
                    <table class="table table-hover">
                      <thead>
                        <tr>
                          <th>节点名称</th>
                          <th>计划日期</th>
                          <th>实际日期</th>
                          <th>状态</th>
                          <th>备注</th>
                          <th>操作</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr v-for="milestone in getCompletionMilestones" :key="milestone.id">
                          <td class="milestone-name" @click="viewMilestoneDetail(milestone)">{{ milestone.name }}</td>
                          <td @click="viewMilestoneDetail(milestone)">{{ milestone.planned_date || '-' }}</td>
                          <td @click="viewMilestoneDetail(milestone)">{{ milestone.actual_date || '-' }}</td>
                          <td @click="viewMilestoneDetail(milestone)">
                            <span class="badge" :class="getMilestoneStatusClass(milestone)">
                              {{ getMilestoneStatus(milestone) }}
                            </span>
                          </td>
                          <td @click="viewMilestoneDetail(milestone)">{{ milestone.notes || '-' }}</td>
                          <td>
                            <button class="btn btn-sm btn-outline-primary me-1" @click.stop="editMilestone(milestone)">
                              <i class="bi bi-pencil"></i> 编辑
                            </button>
                          </td>
                        </tr>
                        <tr v-if="getCompletionMilestones.length === 0">
                          <td colspan="6" class="text-center py-3">暂无竣工节点数据</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 进度记录 -->
        <div class="tab-pane fade" id="progress" role="tabpanel" aria-labelledby="progress-tab">
          <div class="card mb-4">
            <div class="card-header d-flex justify-content-between align-items-center">
              <h5 class="card-title mb-0">进度记录</h5>
              <button class="btn btn-primary btn-sm">
                <i class="bi bi-plus-circle me-1"></i> 添加进度记录
              </button>
            </div>
            <div class="card-body">
              <div class="table-responsive">
                <table class="table table-hover">
                  <thead>
                    <tr>
                      <th>更新日期</th>
                      <th>周数</th>
                      <th>本周进度</th>
                      <th>下周计划</th>
                      <th>矛盾问题</th>
                      <th>解决方案</th>
                      <th>付款进度</th>
                      <th>操作</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr v-for="(update, index) in progressUpdates" :key="index">
                      <td>{{ update.update_date }}</td>
                      <td>第{{ update.week_number }}周</td>
                      <td>{{ update.current_progress }}</td>
                      <td>{{ update.next_plan }}</td>
                      <td>{{ update.issues || '-' }}</td>
                      <td>{{ update.solutions || '-' }}</td>
                      <td>{{ update.payment_progress || '-' }}</td>
                      <td>
                        <button class="btn btn-sm btn-outline-primary me-1">
                          <i class="bi bi-pencil"></i>
                        </button>
                        <button class="btn btn-sm btn-outline-danger">
                          <i class="bi bi-trash"></i>
                        </button>
                      </td>
                    </tr>
                    <tr v-if="progressUpdates.length === 0">
                      <td colspan="8" class="text-center py-4">
                        <p class="text-muted mb-3">暂无进度更新数据</p>
                        <button class="btn btn-outline-primary">
                          <i class="bi bi-plus-circle me-1"></i> 添加首条进度记录
                        </button>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>

        <!-- 合同信息 -->
        <div class="tab-pane fade" id="contract" role="tabpanel" aria-labelledby="contract-tab">
          <div class="card mb-4">
            <div class="card-header">
              <h5 class="card-title mb-0">合同信息</h5>
            </div>
            <div class="card-body">
              <div class="row">
                <div class="col-md-6 mb-3">
                  <div class="detail-item">
                    <div class="detail-label">发包模式</div>
                    <div class="detail-value">{{ projectData.bidding_mode || '-' }}</div>
                  </div>
                </div>
                <div class="col-md-6 mb-3">
                  <div class="detail-item">
                    <div class="detail-label">合同开工日期</div>
                    <div class="detail-value">{{ projectData.contract_start_date || '-' }}</div>
                  </div>
                </div>
                <div class="col-md-6 mb-3">
                  <div class="detail-item">
                    <div class="detail-label">合同竣工日期</div>
                    <div class="detail-value">{{ projectData.contract_end_date || '-' }}</div>
                  </div>
                </div>
                <div class="col-md-6 mb-3">
                  <div class="detail-item">
                    <div class="detail-label">合同工期(天)</div>
                    <div class="detail-value">{{ projectData.contract_duration || '-' }}</div>
                  </div>
                </div>
                <div class="col-md-6 mb-3">
                  <div class="detail-item">
                    <div class="detail-label">施工合同价(万元)</div>
                    <div class="detail-value">{{ projectData.contract_amount ? projectData.contract_amount.toLocaleString() : '-' }}</div>
                  </div>
                </div>
                <div class="col-md-6 mb-3">
                  <div class="detail-item">
                    <div class="detail-label">当前进度</div>
                    <div class="detail-value">{{ projectData.progress ? `${projectData.progress}%` : '-' }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 参建单位 -->
        <div class="tab-pane fade" id="units" role="tabpanel" aria-labelledby="units-tab">
          <div class="card mb-4">
            <div class="card-header">
              <h5 class="card-title mb-0">参建单位信息</h5>
            </div>
            <div class="card-body">
              <div class="row">
                <div class="col-md-6">
                  <h6 class="mb-3">设计与造价单位</h6>
                  <div class="detail-item mb-3">
                    <div class="detail-label">设计单位</div>
                    <div class="detail-value">{{ projectData.design_unit || '-' }}</div>
                  </div>
                  <div class="detail-item mb-3">
                    <div class="detail-label">造价编制单位</div>
                    <div class="detail-value">{{ projectData.cost_compilation_unit || '-' }}</div>
                  </div>
                  <div class="detail-item mb-3">
                    <div class="detail-label">造价审核单位</div>
                    <div class="detail-value">{{ projectData.cost_audit_unit || '-' }}</div>
                  </div>
                </div>
                <div class="col-md-6">
                  <h6 class="mb-3">施工与监理单位</h6>
                  <div class="detail-item mb-3">
                    <div class="detail-label">施工单位</div>
                    <div class="detail-value">{{ projectData.construction_unit || '-' }}</div>
                  </div>
                  <div class="detail-item mb-3">
                    <div class="detail-label">监理单位</div>
                    <div class="detail-value">{{ projectData.supervision_unit || '-' }}</div>
                  </div>
                </div>
              </div>
              
              <hr class="my-4">
              
              <div class="row">
                <div class="col-md-6">
                  <h6 class="mb-3">使用单位信息</h6>
                  <div class="detail-item mb-3">
                    <div class="detail-label">使用单位</div>
                    <div class="detail-value">{{ projectData.using_unit || '-' }}</div>
                  </div>
                  <div class="detail-item mb-3">
                    <div class="detail-label">代供单位</div>
                    <div class="detail-value">{{ projectData.supply_unit || '-' }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 任务书要求 -->
        <div class="tab-pane fade" id="task" role="tabpanel" aria-labelledby="task-tab">
          <div class="card mb-4">
            <div class="card-header">
              <h5 class="card-title mb-0">任务书要求</h5>
            </div>
            <div class="card-body">
              <div class="row">
                <div class="col-md-6 mb-3">
                  <div class="detail-item">
                    <div class="detail-label">项目规划类型</div>
                    <div class="detail-value">{{ projectData.planning_type || '-' }}</div>
                  </div>
                </div>
                <div class="col-md-6 mb-3">
                  <div class="detail-item">
                    <div class="detail-label">任务书文号</div>
                    <div class="detail-value">{{ projectData.task_document_no || '-' }}</div>
                  </div>
                </div>
                <div class="col-md-6 mb-3">
                  <div class="detail-item">
                    <div class="detail-label">总投资(万元)</div>
                    <div class="detail-value">{{ projectData.total_investment ? projectData.total_investment.toLocaleString() : '-' }}</div>
                  </div>
                </div>
                <div class="col-md-6 mb-3">
                  <div class="detail-item">
                    <div class="detail-label">直接费(万元)</div>
                    <div class="detail-value">{{ projectData.direct_cost ? projectData.direct_cost.toLocaleString() : '-' }}</div>
                  </div>
                </div>
                <div class="col-md-6 mb-3">
                  <div class="detail-item">
                    <div class="detail-label">任务书下达时间</div>
                    <div class="detail-value">{{ projectData.task_issue_date || '-' }}</div>
                  </div>
                </div>
                <div class="col-md-6 mb-3">
                  <div class="detail-item">
                    <div class="detail-label">任务书要求完成时间</div>
                    <div class="detail-value">{{ projectData.required_completion_date || '-' }}</div>
                  </div>
                </div>
                <div class="col-md-6 mb-3">
                  <div class="detail-item">
                    <div class="detail-label">上级延期完成时间</div>
                    <div class="detail-value">{{ projectData.extended_completion_date || '-' }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 备注信息 -->
        <div class="tab-pane fade" id="notes" role="tabpanel" aria-labelledby="notes-tab">
          <div class="card mb-4">
            <div class="card-header d-flex justify-content-between align-items-center">
              <h5 class="card-title mb-0">备注信息</h5>
              <button class="btn btn-outline-primary btn-sm" @click="toggleEditNotes" v-if="!isEditingNotes">
                <i class="bi bi-pencil me-1"></i> 编辑备注
              </button>
              <div v-else>
                <button class="btn btn-success btn-sm me-2" @click="saveNotes">
                  <i class="bi bi-check-lg me-1"></i> 保存
                </button>
                <button class="btn btn-outline-secondary btn-sm" @click="cancelEditNotes">
                  <i class="bi bi-x-lg me-1"></i> 取消
                </button>
              </div>
            </div>
            <div class="card-body">
              <div class="row">
                <div class="col-md-6 mb-3">
                  <div class="detail-item">
                    <div class="detail-label">现场联系人</div>
                    <div class="detail-value">{{ projectData.field_contact || '-' }}</div>
                  </div>
                </div>
                <div class="col-md-6 mb-3">
                  <div class="detail-item">
                    <div class="detail-label">联系电话</div>
                    <div class="detail-value">{{ projectData.contact_phone || '-' }}</div>
                  </div>
                </div>
                <div class="col-12 mt-3">
                  <div class="detail-item">
                    <div class="detail-label">备注信息</div>
                    <div v-if="!isEditingNotes" class="detail-value p-3 bg-light rounded">
                      {{ projectData.notes || '暂无备注信息' }}
                    </div>
                    <textarea 
                      v-else 
                      class="form-control" 
                      rows="5" 
                      v-model="editingNotes"
                      placeholder="请输入备注信息"
                    ></textarea>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()
const projectId = parseInt(route.params.id)

// 加载状态
const loading = ref(true)

// 项目数据
const projectData = ref({})
const milestones = ref([])
const progressUpdates = ref([])

// 最近更新日期
const lastUpdateDate = computed(() => {
  if (progressUpdates.value.length > 0) {
    return progressUpdates.value[0].update_date
  }
  return projectData.value.updated_at
})

// 获取前期节点
const getEarlyMilestones = computed(() => {
  return milestones.value.filter(m => m.category === '前期')
})

// 获取发包节点
const getBiddingMilestones = computed(() => {
  return milestones.value.filter(m => m.category === '发包')
})

// 获取施工节点
const getConstructionMilestones = computed(() => {
  return milestones.value.filter(m => m.category === '施工')
})

// 获取竣工节点
const getCompletionMilestones = computed(() => {
  return milestones.value.filter(m => m.category === '竣工')
})

// 获取自定义节点
const getCustomMilestones = computed(() => {
  return milestones.value.filter(m => m.is_custom)
})

// 获取项目详情
async function fetchProjectDetail() {
  try {
    loading.value = true
    const response = await window.api.database.getProject(projectId)
    
    if (response.success) {
      projectData.value = response.data.project
      milestones.value = response.data.milestones
      progressUpdates.value = response.data.progressUpdates
    } else {
      console.error('获取项目详情失败:', response.error)
    }
  } catch (error) {
    console.error('获取项目详情失败:', error)
  } finally {
    loading.value = false
  }
}

// 获取状态样式
function getStatusClass(project) {
  if (project.phase_status === '滞后') {
    return 'bg-danger'
  } else if (project.phase_status === '阶段性迟缓') {
    return 'bg-warning'
  } else {
    return 'bg-success'
  }
}

// 获取里程碑分类样式
function getCategoryClass(category) {
  switch (category) {
    case '前期':
      return 'bg-info'
    case '发包':
      return 'bg-primary'
    case '施工':
      return 'bg-warning'
    case '竣工':
      return 'bg-success'
    default:
      return 'bg-secondary'
  }
}

// 获取里程碑状态
function getMilestoneStatus(milestone) {
  if (!milestone.planned_date) {
    return '未设置计划'
  }
  
  if (milestone.actual_date) {
    const planned = new Date(milestone.planned_date)
    const actual = new Date(milestone.actual_date)
    
    if (actual > planned) {
      return '延期完成'
    }
    return '已完成'
  }
  
  const now = new Date()
  const planned = new Date(milestone.planned_date)
  
  if (now > planned) {
    return '已逾期'
  }
  
  return '进行中'
}

// 获取里程碑状态样式
function getMilestoneStatusClass(milestone) {
  const status = getMilestoneStatus(milestone)
  
  switch (status) {
    case '已完成':
      return 'bg-success'
    case '延期完成':
      return 'bg-warning'
    case '已逾期':
      return 'bg-danger'
    case '进行中':
      return 'bg-info'
    default:
      return 'bg-secondary'
  }
}

// 编辑项目
function editProject() {
  router.push(`/project-edit/${projectId}`)
}

// 编辑里程碑
function editMilestone(milestone) {
  // 显示编辑里程碑的模态框
  showMilestoneModal.value = true
  currentMilestone.value = { ...milestone }
  isEditMode.value = true
}

// 查看里程碑详情
function viewMilestoneDetail(milestone) {
  router.push(`/milestone-detail/${milestone.id}`)
}

// 模态框相关状态
const showMilestoneModal = ref(false)
const currentMilestone = ref({})
const isEditMode = ref(false)

// 预定义的里程碑节点选项
const milestoneOptions = {
  '前期': ['任务书下达', '方案设计确认', '初步设计确认', '完成施工图审查', '完成清单编制', '完成清单审核', '施工图确认'],
  '发包': ['企业邀请/招标公告发布', '企业报名时间', '开标时间', '定标时间', '中标通知书发放时间', '合同签订时间', '直接委托'],
  '施工': ['质监注册时间', '施工许可证时间', '开工令时间', '初步验收时间'],
  '竣工': ['档案验收时间', '竣工验收时间', '实体移交时间', '档案移交时间', '竣工备案时间', '结算时间', '决算时间']
}

// 根据当前选择的类别获取节点名称选项
const getMilestoneNameOptions = computed(() => {
  if (!currentMilestone.value.category) {
    return []
  }
  return milestoneOptions[currentMilestone.value.category] || []
})

// 处理类别变更
function handleCategoryChange() {
  // 如果当前名称不在新类别的选项中，重置名称
  if (currentMilestone.value.name && !getMilestoneNameOptions.value.includes(currentMilestone.value.name)) {
    currentMilestone.value.name = getMilestoneNameOptions.value[0] || ''
  }
}

// 保存里程碑
async function saveMilestone() {
  try {
    const response = await window.api.database.updateMilestone(currentMilestone.value)
    
    if (response.success) {
      // 更新本地数据
      const index = milestones.value.findIndex(m => m.id === currentMilestone.value.id)
      if (index !== -1) {
        milestones.value[index] = { ...currentMilestone.value }
      }
      
      // 关闭模态框
      showMilestoneModal.value = false
      currentMilestone.value = {}
      isEditMode.value = false
      
      // 显示成功消息
      alert('里程碑更新成功')
    } else {
      console.error('更新里程碑失败:', response.error)
      alert('更新里程碑失败: ' + response.error)
    }
  } catch (error) {
    console.error('更新里程碑失败:', error)
    alert('更新里程碑失败: ' + error.message)
  }
}

// 关闭模态框
function closeMilestoneModal() {
  showMilestoneModal.value = false
  currentMilestone.value = {}
  isEditMode.value = false
}

// 备注编辑相关状态
const isEditingNotes = ref(false)
const editingNotes = ref('')

// 切换备注编辑状态
function toggleEditNotes() {
  isEditingNotes.value = true
  editingNotes.value = projectData.value.notes || ''
}

// 保存备注信息
async function saveNotes() {
  try {
    const updatedProject = { ...projectData.value, notes: editingNotes.value }
    const response = await window.api.database.updateProject(updatedProject)
    
    if (response.success) {
      // 更新本地数据
      projectData.value.notes = editingNotes.value
      isEditingNotes.value = false
      alert('备注信息更新成功')
    } else {
      console.error('更新备注信息失败:', response.error)
      alert('更新备注信息失败: ' + response.error)
    }
  } catch (error) {
    console.error('更新备注信息失败:', error)
    alert('更新备注信息失败: ' + error.message)
  }
}

// 取消编辑备注
function cancelEditNotes() {
  isEditingNotes.value = false
  editingNotes.value = ''
}

// 生命周期钩子
onMounted(() => {
  fetchProjectDetail()
})
</script>

<style scoped>
.project-header {
  background-color: white;
  border-radius: 0.25rem;
  margin-bottom: 20px;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.project-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 10px;
}

.project-meta {
  color: #6c757d;
  font-size: 0.9rem;
}

.detail-item {
  margin-bottom: 10px;
}

.detail-label {
  font-size: 0.875rem;
  color: #6c757d;
  margin-bottom: 5px;
}

.detail-value {
  font-weight: 500;
}

.badge {
  padding: 0.5em 0.75em;
}

.bg-success {
  background-color: #28a745 !important;
}

.bg-warning {
  background-color: #ffc107 !important;
  color: #212529 !important;
}

.bg-danger {
  background-color: #dc3545 !important;
}

.bg-info {
  background-color: #17a2b8 !important;
}

.bg-primary {
  background-color: #007bff !important;
}

.bg-secondary {
  background-color: #6c757d !important;
}

.card {
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.table th, .table td {
  vertical-align: middle;
  padding: 0.75rem 1rem;
}

.card-header {
  background-color: rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
  padding: 0.75rem 1.25rem;
}

.card-header h5 {
  margin-bottom: 0;
  font-weight: 600;
}

.h-100 {
  height: 100% !important;
}

.nav-tabs .nav-link {
  color: #495057;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 1rem 1.5rem;
}

.nav-tabs .nav-link.active {
  color: #3498db;
  background-color: transparent;
  border-bottom: 2px solid #3498db;
}

.nav-tabs .nav-link:hover:not(.active) {
  border-color: transparent;
  background-color: rgba(0, 0, 0, 0.03);
}

.nav-pills .nav-link.active {
  background-color: #3498db;
}

/* 里程碑表格样式 */
.milestone-name {
  font-weight: 500;
  cursor: pointer;
  color: #007bff;
}

.milestone-name:hover {
  text-decoration: underline;
}

tr td {
  cursor: pointer;
}

tr:hover {
  background-color: rgba(0, 0, 0, 0.03);
}

/* 模态框样式 */
.modal {
  background-color: rgba(0, 0, 0, 0.5);
}

.modal.show {
  display: block;
}

.modal-backdrop.show {
  opacity: 0.5;
}
</style> 